<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: 14180
  Date: 2020/9/23
  Time: 14:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/pintuer.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css">
<script src="${pageContext.request.contextPath}/static/js/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>

<head>
    <title>课程信息管理</title>
</head>
<body>
<div>
    <button class="button" onclick="addCourse()">新增课程</button>
    <div align="center">

    </div>
</div>
<div align="center" >
    <input class="form-control"  type="text" style="width: 400px" placeholder="请输入用户课程名、上课教室、课程类型">
    <button class="button" data-dismiss="modal" onclick="courseSeek()">搜索</button>
</div>
<div class="margin">
    <table class="table">
        <thead>
        <tr>
            <td>编号</td>
            <td>课程名</td>
            <td>上课时间</td>
            <td>上课教室</td>
            <td>上课周期</td>
            <td>课程类型</td>
            <td>操作</td>
        </tr>
        </thead>

        <tbody id="tb">

        </tbody>
    </table>
</div>
<%--分页区域--%>
<div class="margin">
    每页显示 <select id="pageSizeSelect" onchange="onSelectChange()">
    <option value="2" selected="selected">>2</option><%-- selected默认--%>
    <option value="5">5</option>
    <option value="10">10</option>
    </select> 条数据，当前是第<span id="courrentPageSpan"></span> 页，
    总共<span id="totalPageSpan"></span> 页
    <button class="button" onclick="firstPage()">首页</button>
    <button class="button" onclick="prePage()">上一页</button>
    <button class="button" onclick="nextPage()">下一页</button>
    <button class="button" onclick="lastPage()">尾页</button>

<%--编辑课程的模态框--%>
</div>
<div class="modal">
    <div class="modal-dialog">
        <div class="modal-content">

        <div class="modal-header">
            <h4>编辑课程信息</h4>
        </div>
            <div class="modal-body">
                <label class="control-label">课程名</label>
                <input class="form-control" type="text" id="nameInput" placeholder="请输入课程名">
                <label class="control-label">上课时间</label>
                <input class="form-control" type="text" id="timeInput" placeholder="请输入上课时间">
                <label class="control-label">上课教室</label>
                <input class="form-control" type="text" id="weekInput" placeholder="请输入上课周期">
                <label class="control-label">课程类型</label>
                <input class="control-label" type="text" id="typeInput" placeholder="请输入课程类型">


            </div>
            <div class="modal-footer">


            </div>

        </div>

    </div>

</div>


<script>
    //当前页码
    var currentPage=1;
    //每页的记录个数
    var pageSize=2;
    //总共有多少页
    var totalPage;
    $(function () {
       // loadList();
        loadListByPage();
    });
    //用户修改的每页的记录数
    function onSelectChange() {
        //用户修改页码数
        pageSize=$("#pageSizeSelect").val();
        loadListByPage();
    }
    //首页的回调方法
    function firstPage() {
        currentPage=1;
        loadListByPage();

    }
    //上一页回调方法
    function prePage() {
        currentPage--;
        if(currentPage<1){
            currentPage=1;
        }
        loadListByPage();
    }
    //下一页的回调方法
    function nextPage() {
        currentPage++;
        if(currentPage>totalPage){
            currentPage=totalPage;
        }
        loadListByPage();
    }
    //尾页回调方法
    function lastPage() {
        currentPage=totalPage;
        loadListByPage();
    }
    //分页
    function loadListByPage() {
        $.ajax({
            url: "${pageContext.request.contextPath}/course/getCourseByPage",
            type: "get",
            data:{"currentPage":currentPage,"pageSize":pageSize},
            dataType: "json",
            success: function (result) {
              /*  console.log(result.courseList);*/
                if (result.code == 0) {
                    showList(result.courseList);
                    totalPage = result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#courrentPageSpan").html(currentPage);
                }
            },
            error: function (err) {
            }

        })
    }

    function showList(courseList) {
        console.log(JSON.stringify(courseList));
        var html = '';
        //遍历userList数组
        for (var i = 0; i < courseList.length; i++) {
            //拿到一个用户信息
            var item = courseList[i];
            console.log(JSON.stringify(item))
            html += "<tr>";
            html += "<td>" + item.courseId + "</td>";//显示课程编号
            html += "<td>" + item.courseName + "</td>";//显示课程名
            html += "<td>" + item.courseTime + "</td>";//显示上课时间
            html += "<td>" + item.classRoom + "</td>";//显示上课教室
            html += "<td>" + item.courseWeek + "</td>";//显示上课周期
            html += "<td>" + item.courseType + "</td>";//显示课程类型
            html += "<td><button class='button' onclick='getUserDetail(\"" + item.courseId + "\")'>编辑</button> " +
                "<button class='button' onclick='deleteOneUser(\""+item.courseId+"\")'>删除</button></td>";//操作
            html += "</tr>";
        }
        $("#tb").html(html);

    }

    //加载用户列表数据
    function loadList() {
        $.ajax({
            url: "${pageContext.request.contextPath}/course/getcourse",
            type: "get",
            dataType: "json",
            success: function (result) {
                console.log(result.courseList);
                if (result.code == 0) {
                    showList(result.courseList);
                }
            },
            error: function (err) {
            }

        })
    }
</script>
</body>
</html>
